<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>


		<form class="layui-form" action="" style="margin-top: 10px;" lay-filter="demo">


			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">验证手机</label>
					<div class="layui-input-inline">
						<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">验证日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">自定义验证</label>
				<div class="layui-input-inline">
					<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">单行选择框</label>
				<div class="layui-input-block">
					<select name="interest" lay-filter="aihao">
						<option value=""></option>
						<option value="0">写作</option>
						<option value="1" selected="">阅读</option>
						<option value="2">游戏</option>
						<option value="3">音乐</option>
						<option value="4">旅行</option>
					</select>
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block">
					<input type="checkbox" name="like[write]" title="写作">
					<input type="checkbox" name="like[read]" title="阅读" checked="">
					<input type="checkbox" name="like[game]" title="游戏">
				</div>
			</div>



			<div class="layui-form-item">
				<label class="layui-form-label">开关-默认开</label>
				<div class="layui-input-block">
					<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
					<input type="radio" name="sex" value="禁" title="禁用" disabled="">
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">普通文本域</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">多级联动</label>
				<div class="layui-input-inline">
					<select name="province" id="province" lay-filter='province' lay-search>
					</select>
				</div>
				<div class="layui-input-inline">
					<select name="city" id="city" lay-filter='city'>
					</select>
				</div>
				<div class="layui-input-inline">
					<select name="address" id="address" lay-filter='address'>
					</select>
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">爱好</label>
				<div class="layui-input-block">
					<select name="interest" id="interest" lay-filter="interest">
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">职业</label>
				<div class="layui-input-block">
					<select name="profession" id='profession' lay-filter="profession">
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">充值金额</label>
				<div class="layui-input-block">
					<select name="money" id="money" lay-filter="money">
					</select>
				</div>
			</div>


		</form>


		<script src="layui-v2.5.7/layui/layui.js" charset="utf-8"></script>
		<script src="js/layui_form.js"></script>
		<script src="js/select_json.js"></script>

		<script>
			var LayForm = new LayForm();
			LayForm.init({
				formFilter: 'demo',
				submitFilter: 'demo1'
			}, {
				"username": "我是谁",
				"phone": "18225840789",
				date: "2020-03-02",
				password: '7324362'

			}, function(form, layer, layedit, laydate) {

				//多级联动
				LayForm.select({
					elems: ['#province', '#city', '#address'],
					otherOption: true,
					linkage:true, //是否联动
					layFilters: ['province', 'city', 'address'],
					defaultValues:['anA01','anA01-01','anA01-01-02'],
					keyValues:[{key:'name',value:'code',extra:'treeid'}],
					url: 'http://192.168.0.125:6889/rest/test/getMsg',
					//jsonData: resDt.data,
					where: {
						root: 'zhongguo'
					},
					change: function(data, form) {
						console.log(data);
						console.log(form);
						//return false;
					},
					//request:{limit:10},
					parseData: function(res) {
						console.log(res);
						return {
							//code: res.code,
							success: true, //设置为true他才会执行
							msg: '',
							//data:res 
							data: res.resultValue //这里肯定是数组对象
						};
					},
				})


				//非联动 --> 注意同一个表单只能‘使用’一次select 方法 不然原数据会被覆盖
				// 需要使用多个 建议引用layui-select.js 通过多次创建对象调用调用select方法
			/* 	LayForm.select({
					elems: ['#interest', '#profession', '#money'],
					otherOption: true,
					layFilters: ['interest', 'profession', 'money'],
					defaultValues: ['game', 'jiaoshi', '0050'],
					keyValues: [{
						key: 'interestName',
						value: 'inCode',
						extra: 'id'
					}, {
						key: 'name',
						value: 'proCode'
					}],
					url: 'http://192.168.0.125:6889/rest/test/getMsg',
					type: 'post',
					//jsonData: resDt.data,
					where: {
						root: 'zhongguo'
					},
					change: function(data, form) {
						console.log(data);
						//console.log(form);
						//return false;
					},
					//request:{limit:10},
					parseData: function(res) {
						//console.log(res);
						return {
							//code: res.code,
							success: true, //设置为true他才会执行
							msg: '',
							//data:res 
							data: res.resultValue //这里肯定是数组对象
						};
					},
				}) */


				laydate.render({
					elem: '#date'
				});
			}, function(form, layer, layedit, laydate, data) {
				console.log(data)
			});
		</script>

	</body>
</html>
